<template>
  <el-popover
    :placement="placement"
    :title="title"
    :width="width"
    :trigger="trigger"
    :content="content"
    v-bind="$attrs"
    v-on="$listeners"
  >
    <slot slot="reference" name="reference" />
  </el-popover>
</template>

<script>
export default {
  name: 'MyPopover',
  props: {
    placement: { type: String, default: 'bottom',
      validator: (val) => ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end'].indexOf(val) !== -1
    },
    title: { type: String, default: '' },
    width: { type: [String, Number], default: 200 },
    trigger: {
      type: String,
      default: 'click',
      validator: value => ['click', 'focus', 'hover', 'manual'].indexOf(value) > -1
    },
    content: { type: String, default: '' }
  }
}
</script>

<style>

</style>
